<template>
  <div class="havepaid">
    <table v-show="order.length ==0?false:true">
      <thead>
        <tr>
          <td>下单金额</td>
          <td>商品数量</td>
          <td>下单时间</td>
        </tr>
      </thead>
      <tbody>
        <tr
          @click="to_order(ele.time)"
          v-for="(ele,index) in order"
          :key="index"
        >
          <th>{{price(ele).toFixed(2)}}¥</th>
          <th>{{ele.items.length}}份</th>
          <th>{{ele.time}}</th>
        </tr>
      </tbody>
    </table>
    <div class="bottom" v-show="order.length ==0?true:false">
      <el-card class="box-card">
        <div>
        :) 您没有订单记录！
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "HavePaid",
  mounted() {
    this.$store.dispatch("getOrder", this.info.id);
  },
  computed: {
    ...mapState({
      info: (state) => {
        return state.user.info;
      },
    }),
    ...mapState({
      order: (state) => {
        return state.food.order;
      },
    }),

    // 个人信息
    ...mapState({
      info: (state) => {
        return state.user.info;
      },
    }),
  },
  methods: {
    price(ele) {
      // console.log(ele);
      return ele.items.reduce((pre, el) => {
        return (pre += el.price * el.account);
      }, 0);
    },
    // user_id:this.info.id,time
    to_order(time) {
      console.log(this.info.id);
      this.$router.push({
        path: "/index/order/orderdetails",
        query: { user_id: this.info.id, time },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.havepaid {
  margin: 0 auto;
  padding: 20px;
  width: 800px;
  table {
    border: 1px solid #fff;
    margin: 0 auto;
    width: 80%;
    background-color: blue;
    tr {
      text-align: center;
    }
    thead {
      background-color: #e6d6d6;
      font-size: 18px;
      font-weight: 700;
      tr {
        height: 20px;
      }
    }
    tbody {
      background-color: rgb(233, 176, 70);
      font-size: 16px;
      tr {
        height: 30px;
        border: 1px solid #b34a4a;
      }
      tr:hover {
        background-color: pink;
        cursor: pointer;
      }
    }
  }
  .bottom{
    margin: 0 auto;
    width: 500px;
    // width: 1200px;
    .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    font-size: 20px;
  }
  }
}
</style>